import { defineComponent, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NIcon,
  NInput,
  NPagination,
  NSelect,
  NSpace
} from 'naive-ui'
import { SearchOutlined } from '@vicons/antd'
import Card from '@/components/card'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import { useDatasource } from '@/views/data-manage/common/use-datasource'
import CreateDatabaseModal from '@/views/data-manage/dialog/data-catalog/create-database-modal'
import ModDbRemarkModal from '@/views/data-manage/dialog/data-catalog/mod-db-remark-modal'
import ModDbOwnerModal from '@/views/data-manage/dialog/data-catalog/mod-db-owner-modal'
import DropDbModal from '@/views/data-manage/dialog/data-catalog/drop-db-modal'

const PublicDataTab = defineComponent({
  name: 'PublicDataTab',
  setup() {
    const showCreateDatabaseModalRef = ref(false)
    const { state, updateList, changePage, changePageSize, onOperationClick } =
      useTable()
    const { columnsRef } = useColumns(onOperationClick)
    //数据源类型下拉选项
    const { dsVariables, getDsTypeOptions, getDatasourceByType } =
      useDatasource()
    getDsTypeOptions()

    return {
      state,
      dsVariables,
      columnsRef,
      onUpdatedList: updateList,
      changePage,
      changePageSize,
      getDatasourceByType,
      showCreateDatabaseModalRef
    }
  },
  methods: {
    handleCreateDatabaseModalShowChange() {
      this.showCreateDatabaseModalRef = false
    },
    handleModDbRemarkModalShowChange() {
      this.state.modDbRemarkModalShow = false
    },
    handleModDbOwnerModalShowChange() {
      this.state.modDbOwnerModalShow = false
    },
    handleDropDbModalShowChange() {
      this.state.dropDbModalShow = false
    },
    onCreateDatabase() {
      this.showCreateDatabaseModalRef = true
    },
    handleDsTypeChange(value: string) {
      this.state.searchParam.datasourceId = null
      this.getDatasourceByType(value)
    },
    handleDsChange(value: number) {
      this.state.searchParam.datasourceId = value
      this.onUpdatedList()
    },
    isGloDataAdmin(): Boolean {
      let flag = false
      window.$store.state.userInfo.roles.forEach((item: { code: string }) => {
        if (item.code === 'glo_data_admin') {
          flag = true
          return
        }
      })
      return flag
    }
  },
  render() {
    return (
      <>
        <NSpace vertical>
          <Card>
            <NSpace justify='space-between'>
              <NButton onClick={this.onCreateDatabase} type='info' size='small'>
                {window.$t('dataManage.createDatabase')}
              </NButton>
              <NSpace>
                <NSelect
                  v-model={[this.state.searchParam.datasourceType, 'value']}
                  options={this.dsVariables.dsTypeOptions}
                  size='small'
                  style='width:150px'
                  placeholder={window.$t('dataManage.datasourceTypeTips')}
                  onUpdateValue={this.handleDsTypeChange}
                />
                <NSelect
                  v-model={[this.state.searchParam.datasourceId, 'value']}
                  options={this.dsVariables.dsOptions}
                  filterable
                  size='small'
                  style='width:200px'
                  placeholder={window.$t('dataManage.selectDatasourceTips')}
                  onUpdateValue={this.handleDsChange}
                />
                <NInput
                  v-model:value={this.state.searchParam.searchKey}
                  clearable
                  size='small'
                  placeholder={window.$t('dataManage.dbNameOrRemark')}
                  style='width: 140px'
                />
                <NButton type='info' size='small' onClick={this.onUpdatedList}>
                  <NIcon>
                    <SearchOutlined />
                  </NIcon>
                </NButton>
              </NSpace>
            </NSpace>
          </Card>
          <Card>
            <NSpace vertical>
              <NDataTable
                row-class-name='items'
                columns={this.columnsRef.columns}
                size='small'
                data={this.state.list}
                loading={this.state.loading}
                scrollX={this.columnsRef.tableWidth}
              />
              <NSpace justify='end'>
                <NPagination
                  v-model:page={this.state.page}
                  v-model:page-size={this.state.limit}
                  item-count={this.state.count}
                  show-size-picker
                  page-sizes={[10, 30, 50]}
                  show-quick-jumper
                  on-update:page={this.changePage}
                  on-update:page-size={this.changePageSize}
                />
              </NSpace>
            </NSpace>
          </Card>
        </NSpace>
        <CreateDatabaseModal
          showModal={this.showCreateDatabaseModalRef}
          onModalShowChange={this.handleCreateDatabaseModalShowChange}
          onRefreshList={this.onUpdatedList}
          datasourceId={this.state.searchParam.datasourceId}
        ></CreateDatabaseModal>
        <ModDbRemarkModal
          showModal={this.state.modDbRemarkModalShow}
          onModalShowChange={this.handleModDbRemarkModalShowChange}
          onRefreshList={this.onUpdatedList}
          databaseInfo={this.state.currentRecord}
        ></ModDbRemarkModal>
        <ModDbOwnerModal
          showModal={this.state.modDbOwnerModalShow}
          onModalShowChange={this.handleModDbOwnerModalShowChange}
          onRefreshList={this.onUpdatedList}
          databaseInfo={this.state.currentRecord}
        ></ModDbOwnerModal>
        <DropDbModal
          showModal={this.state.dropDbModalShow}
          onModalShowChange={this.handleDropDbModalShowChange}
          onRefreshList={this.onUpdatedList}
          databaseInfo={this.state.currentRecord}
        ></DropDbModal>
      </>
    )
  }
})

export default PublicDataTab
